<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.8.3.js"></script>
    <script src="js/galleryLib/jquery.ad-gallery.js"></script>
    <link href="js/galleryLib/jquery.ad-gallery.css" rel="stylesheet" media="screen">



    <!-- Add jQuery library -->


    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/backbone/js/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="/backbone/js/fancyBox/source/jquery.fancybox.js?v=2.1.3"></script>
    <link rel="stylesheet" type="text/css" href="/backbone/js/fancyBox/source/jquery.fancybox.css?v=2.1.2" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="/backbone/js/fancyBox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="/backbone/js/fancyBox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="/backbone/js/fancyBox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="/backbone/js/fancyBox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="/backbone/js/fancyBox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
    <title></title>
</head>
<body>
<div align="center">

<div class="ad-gallery">
    <div class="ad-image-wrapper">

    </div>
    <div class="ad-nav">
        <div class="ad-thumbs">
            <ul class="ad-thumb-list">
                <li>
                    <a href="/backbone/images/mini/22010501Т_1.jpg">
                        <img src="/backbone/images/mini/22010501Т_1.jpg">
                    </a>
                </li>
                <li>
                    <a href="/backbone/images/mini/22010501Т.jpg">
                        <img src="/backbone/images/mini/22010501Т.jpg">
                    </a>
                </li>
                <li>
                    <a href="/backbone/images/mini/22010501Т_2.jpg">
                        <img src="/backbone/images/mini/22010501Т_2.jpg">
                    </a>
                </li>
                <li>
                    <a href="/backbone/images/mini/22010501Т_3.jpg">
                        <img src="/backbone/images/mini/22010501Т_3.jpg">
                    </a>
                </li>
            </ul>
        </div>

    </div>
</div>
</div>

</body>
</html>
<script>
    var galleries = $('.ad-gallery').adGallery({
        loader_image:"/backbone/js/galleryLib/loader.gif",
        width:300,
        height:300,
        update_window_hash:true,
        enable_keyboard_move:true,
        effect: 'fade',
        cycle:true,
        thumbSize:"10px",
        animation_speed:5
    });

    $('.ad-gallery').on("click",".ad-image", function(){
        $.fancybox.open({
            href: $(this).find("img").attr("src"),
            closeBtn:false,
            closeClick:true,
            openEffect: 'elastic',
            closeSpeed: 150
        })
    });

</script>

